import styles from './styles.module.scss'
import SelectNo from "@/assets/select_no.png"
import SelectS from "@/assets/select_s.png"
import SelectSS from "@/assets/select_ss.png"
import finished from '@/assets/score/finished.png'
import notStart from '@/assets/score/notStart.png'
import proceed from '@/assets/score/proceed.png'
import RenderJudge from '@/components/RenderJudge'
import dayjs from 'dayjs'
import Link from 'next/link'
import TV from '@/assets/score/tv.png'
import LiveTips from '../LiveTips'
import { useMemoizedFn, useSafeState, useUpdateEffect } from 'ahooks'
import { useEffect } from 'react'
import { cloneDeep } from 'lodash'
import Eye from '@/assets/eye.png'
import EyeS from '@/assets/eye_s.png'
export const headers = [
  '赛事',
  '时间',
  '状态',
  '主场球队',
  '比分',
  '客场球队',
  '半场',
  '直播',
  '数据中心'
]
const SelectRadio = ({ checked = false, onChange }) => <img onClick={onChange} src={checked ? SelectS.src : SelectNo.src} alt={'选择'} style={{ width: 15, height: 15, flexShrink: 0, cursor: "pointer" }} />

const fraction = (row, value) => (
  <>
    <span>{row?.homeTeamName}</span>
    <span className={value === 'proceed' ? styles.red : ""} style={{ cursor: "pointer" }}>
      <RenderJudge value={value === 'proceed'} active={
        <LiveTips row={row}>
          <i>{row?.homeTeamScore}</i>
          <span>-</span>
          <i>{row?.awayTeamScore}</i>
        </LiveTips>
      } inactive={
        <span>-</span>
      }
      />
    </span>
    <span>{row?.awayTeamName}</span>
  </>
)


const halfCourt = (row, value) => {
  return (
    <span className={value === 'proceed' ? styles.red : ""}>
      <RenderJudge value={value === 'proceed'} active={
        <>
          {row?.homeTeamHalf + '-' + row?.awayTeamHalf}
        </>
      } inactive={
        <>
          -
        </>
      } />
    </span>
  )
}

const live = (row, value) => {
  if (value === 'proceed') {
    return (
      <Link href="/">
        <a href="">
          <img src={TV?.src} alt="" />
          <span>直播中</span>
        </a>
      </Link>
    )
  }
  return <img src={TV?.src} alt="" />
}
const status = {
  proceed: {
    img: proceed.src, text: "正在进行中的比赛", status: <i style={{ display: "flex", alignItems: "center" }}>
      <img src={proceed.src} alt="" style={{ width: 18, height: 18, marginRight: 8 }} />
      <span>进行中</span>
    </i>,
    fraction,
    halfCourt,
    live
  },
  notStart: {
    img: notStart.src, text: '未开始的比赛', status: <i>
      <span>未</span>
    </i>,
    fraction,
    halfCourt,
    live,
  },
  finished: {
    img: finished.src, text: "已完场的比赛", status: <i>
      <span>完</span>
    </i>,
    fraction,
    halfCourt,
    live,
  },
}

const ScoreState = ({ render, state, data }) => {
  const src = () => {
    if (render) return render(status, data)
    return Reflect.get(status, state)?.img
  }
  return (
    <RenderJudge value={Reflect.get(data, state)?.length > 0} active={
      <section className={styles.blocks}>
        <img src={src()} alt="" />
        <span>{Reflect.get(status, state)?.text}</span>
      </section>
    } />
  )
}


const ScoreBlock = ({ data, value, onChange, show }) => {
  const item = Reflect.get(status, value)
  const Block = ({ row }) => {
    const isShow = () => {
      if (show === 0) return row?.checked
      if (show === 1) return !row?.checked
      return true
    }

    return (
      <li className={styles.bli} key={row?.id} style={{ display: isShow() ? 'flex' : "none" }}>
        <section>
          <SelectRadio onChange={() => onChange(row)} checked={row?.checked}></SelectRadio>
          <span>{row?.eventName}</span>
          <span>{dayjs(row?.matchTime * 1000).format("HH:mm")}</span>
          <span>{item?.status}</span>
        </section>

        <section>
          {item?.fraction(row, value)}
          {item?.halfCourt(row, value)}
        </section>

        <section>
          {item?.live(row, value)}
        </section>

        <Link href={`/score/analysis/1/${row?.id}`} >
          <a title={row?.eventName + "数据分析"}>分析</a>
        </Link>
      </li>
    )
  }
  return (
    <section className={styles.bul}>
      {
        Reflect.get(data, value)?.map(row => (
          <Block row={row} key={row?.id}></Block>
        ))
      }
    </section>
  )
}



const Scorelist = ({ data: propData }) => {

  const [data, setData] = useSafeState(propData)

  const [state, setState] = useSafeState(2)
  useEffect(() => {
    setData(propData)
  }, [propData])


  const ScoreAction = () => {
    return (
      <aside className={styles.scoreAction}>
        <div onClick={() => { setState(s => s === 0 ? 2 : 0) }} className={state === 0 ? styles.active : null}>
          <img src={state === 0 ? SelectSS.src : SelectS.src} alt="" />
          <span>保留</span>
        </div>
        <div onClick={() => { setState((s) => s === 1 ? 2 : 1) }} className={state === 1 ? styles.active : null}>
          <img src={state === 1 ? EyeS.src : Eye?.src} alt="" />
          <span>隐藏</span>
        </div>
      </aside>
    )
  }
  const onChange = useMemoizedFn((row) => {
    const state = cloneDeep(data)
    Reflect.ownKeys(state).forEach((key) => {
      const hasIndex = Reflect.get(data, key).findIndex(item => row?.id === item?.id)
      if (hasIndex > -1) {
        Reflect.set(state[key][hasIndex], 'checked', !Reflect.get(state, key)[hasIndex]?.checked)
      }
    })
    setData(state)
  })
  const clearAll = () => {
    const state = cloneDeep(propData)
    setData(state)
  }
  return (
    <section className={styles.scorelist}>
      <ScoreAction />
      <header>
        <SelectRadio onChange={clearAll} />
        {
          headers?.map((row, i) => (
            <span key={i}>{row}</span>
          ))
        }
      </header>
      {
        Object.keys(status)?.map(key => (
          <>
            <ScoreState state={key} data={data}></ScoreState>
            <ScoreBlock show={state} data={data} value={key} onChange={onChange}></ScoreBlock>
          </>
        ))
      }
    </section>
  )
}




Scorelist.ScoreState = ScoreState

Scorelist.status = status

export default Scorelist